<template>
	<view class="index">
		<!-- 头部组件 -->
		<view class="topbar">
			<view  v-if="props.isNav">
				<NavBar title="钱包" leftIcon="/static/img/index/119.png"> </NavBar>
			</view>
			<!-- 余额 -->
			<view class="balance">
				<view class="balanceBox">
					<view class="balanceTitle">我的余额</view>
					<view class="amount">
						{{ walletData.cashBalance }}
					</view>
					<view class="balanceBtn">
						<view @tap="tapWithdrawSelect" class="balanceBtnItem dFlex withdraw"> 提现 </view>
						<view @tap="jumpToBalanceRecharge" class="balanceBtnItem dFlex recharge"> 充值 </view>
					</view>
					<view class="currency">
						<view class="currencyItem">
							<view class="title"> 钻石 </view>
							<view class="number"> {{walletData.diamondBalance}} </view>
						</view>
						<view class="borderBox"></view>
						<view class="currencyItem points">
							<view class="title"> 积分 </view>
							<view class="number"> {{walletData.scoreBalance}} </view>
						</view>
						<view class="borderBox"></view>
						<view class="currencyItem">
							<view class="title"> 保证金 </view>
							<view class="number"> ￥{{walletData.bondBalance}} </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 收益 -->
		<view class="earnings">
			<view class="earningsItem">
				<view class="number"> ￥{{walletData.rewardAmount}} </view>
				<view class="describe"> 收益打赏 </view>
			</view>
			<view class="borderBox"></view>
			<view class="earningsItem">
				<view class="number"> ￥{{walletData.shareScore}} </view>
				<view class="describe"> 积分分红 </view>
			</view>
		</view>
		<view class="handleBox">
			<!-- <view class="setUpBoxItem" @tap="navTo('/pages/purse/bill')">
				<text>账单</text>
				<image src="@/static/img/zhankai.png" mode="widthFix"></image>
			</view> -->
			<view class="setUpBoxItem" @tap="navTo('/pages/purse/details')">
				<text>明细</text>
				<image src="@/static/img/zhankai.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue"
	import NavBar from "@/components/navBar.vue"
	import { userWallet, userWalletLog } from "@/utils/api/wallet.ts"
	import { onPullDownRefresh } from '@dcloudio/uni-app'
	
	const props = defineProps({
			isNav:{
				default:true,
				type:Boolean
			}
		})

	const amount = ref<string>("30,000")
	const walletData = ref({})

	const navTo = (url : String) : void => {
		uni.navigateTo({ url })
	}

	//提现余额
	const tapWithdrawSelect = () => {
		uni.navigateTo({
			url: '/pages/purse/withdrawal?walletType=BALANCE'
		})
	}


	function loadWallet() {
		userWallet().then(res => {
			walletData.value = res.data
		})
	}

	function jumpToBalanceRecharge() {

		uni.showActionSheet({
			itemList: ['保证金', '余额'],
			success: function (res) {
				console.log(res)
				const index = res.tapIndex
				if (index == 0) {
					navTo('/pages/purse/recharge?walletType=BOND')
				}
				if (index == 1) {
					navTo('/pages/purse/recharge?walletType=BALANCE')
				}

			}
		})
	}

	loadWallet()

	onPullDownRefresh(() => {
		loadWallet()
		uni.stopPullDownRefresh();
	})
</script>

<style lang="scss" scoped>
	:deep(.navBarTop) {
		background-color: transparent;
		color: #fff;
	}

	:deep(.left image) {
		color: #fff;
	}

	.dFlex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.index {
		height: 100vh;
		background-color: #f4f6fa;
		position: relative;

		.topbar {
			width: 100%;
			background-image: url("@/static/img/purseBg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.balance {
				padding: 26rpx 32rpx 0;
				margin:24rpx 0 80rpx;

				.balanceBox {
					height: 550rpx;
					background-color: #fff;
					// box-shadow: 0rpx 12rpx 36rpx 0rpx rgba(238, 239, 241, 0.8);
					border-radius: 24rpx;
					padding: 36rpx 0 40rpx;

					.balanceTitle {
						height: 45rpx;
						font-size: 32rpx;
						font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
						color: #444444;
						text-align: center;
						line-height: 45rpx;
					}

					.amount {
						height: 109rpx;
						font-family: D-DIN-DIN, D-DIN-DIN;
						font-weight: bold;
						font-size: 100rpx;
						color: #111111;
						text-align: center;
						margin: 16rpx 0 64rpx;
					}

					.balanceBtn {
						height: 88rpx;
						padding: 0 60rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.balanceBtnItem {
							width: 265rpx;
							height: 88rpx;
							border-radius: 264rpx 264rpx 264rpx 264rpx;
							font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
							font-size: 32rpx;
							color: #6b64d3;
						}

						.withdraw {
							background: #e4e2fc;
						}

						.recharge {
							background: #6b64d3;
							color: #fff;
						}
					}

					.currency {
						height: 120rpx;
						padding: 32rpx 48rpx 0rpx;
						margin-top: 32rpx;
						border-top: 1rpx solid #ebebeb;
						display: flex;
						align-items: center;

						.currencyItem {
							width: 197rpx;
							height: 88rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;

							.title {
								font-size: 24rpx;
								color: #999999;
								font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
							}

							.number {
								font-size: 32rpx;
								color: #262626;
							}
						}

						.points {
							width: 195rpx;
						}

						.borderBox {
							width: 2rpx;
							height: 48rpx;
							background-color: #e6e6e6;
						}
					}
				}
			}
		}

		.earnings {
			height: 138rpx;
			margin: 0 32rpx 24rpx;
			display: flex;
			align-items: center;
			background: #ffffff;
			border-radius: 24rpx;

			.earningsItem {
				width: 343rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.number {
					font-size: 32rpx;
					color: #262626;
				}

				.describe {
					font-size: 24rpx;
					color: #999999;
					font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
				}
			}

			.borderBox {
				width: 2rpx;
				height: 70rpx;
				background-color: #e6e6e6;
			}
		}

		.handleBox {
			padding: 0 32rpx;

			.setUpBoxItem {
				background-color: #fff;
				height: 96rpx;
				padding: 0 24rpx;
				font-size: 32rpx;
				color: #111111;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				font-weight: 600;
				border-radius: 24rpx;

				image {
					width: 36rpx;
				}
			}
		}

		.handleBox:first-child {
			margin-bottom: 24rpx;
		}
	}
</style>